<template>
    <div>
        <div class="table_content" v-if="state.datas">
            <div class="table_content_button">
                <el-button v-print="print" type="primary">预览</el-button>
            </div>
            <div id="printBox" class="table_content_main">
                <div class="table_content_main_title fonts24 fontw700">{{ state.companyName }}应聘报名表</div>
                <table class="table_content_mains">
                    <tbody v-for="(item, index) in state.datas" :key="index">
                        <tr>
                            <th colspan="7">{{ item.name }}</th>
                        </tr>
                        <tr class="" v-for="(items, indexs) in item.setData" :key="indexs">
                            <th class="th1" colspan="1">{{ items.label }}</th>
                            <td class="td1" v-if="items.type == 'text'">{{ items.value }}</td>
                            <th class="th1" v-if="items.type == 'uploadImage'">
                                <div style="width:127px;height: 168px;">
                                    <img style="width: 100%;height: 100%;" v-if="items.value" :src="items.value" alt="" />
                                    <img style="width: 100%;height: 100%;" v-else src="@/assets/imgs/k1.png" alt="" />
                                </div>
                            </th>
                            <td class="td1" v-if="items.type == 'select'">{{ dictFuns(items.value, items.dictValue) }}</td>
                            <td class="td1" v-if="items.type == 'date-picker'">{{ items.value }}</td>
                            <td class="td1" v-if="items.type == 'uploadImages'">{{ items.value }}</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <!-- 本人承诺 -->
                        <tr class="">
                            <th class="th1">本人承诺</th>
                            <td class="td2" colspan="6">
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                本人郑重承诺：本人向成都香城人力资源开发有限公司提供应聘简历、身份信息、教育经历、工作履历、证书证件等个人信息完全真实可靠，不存在弄虚作假情况。如证实本人提供的个人信息存在虚假情况，本人愿意承担相应的法律责任。
                                <p class="th_b_p">
                                    <span>本人签名</span>
                                    <span>年</span>
                                    <span>月</span>
                                    <span>日</span>

                                </p>
                            </td>

                        </tr>
                    </tfoot>




                </table>
            </div>
        </div>
        <el-empty v-else description="暂无应聘报名表" style="width: 100%;height: 500px;" />
    </div>
</template>

<script lang="ts" setup>
import { formTemplate } from "@/api/home/index"
import { dictFuns } from "@/utils/dictUnit"
import { onMounted, watch } from "vue";
import { reactive, ref } from 'vue'
const props = defineProps({
    id: {
        type: Object,
        default: () => {
            return {}
        }
    }
})
const state = reactive({
    companyName: "" as any,
    datas: {} as any
})

onMounted(() => {
    const data = JSON.parse(sessionStorage.getItem("my_Info"))
    state.companyName = data?.user?.userTenant?.companyName
})
const print = ref({
    id: 'printBox',//这里的id就是上面我们的打印区域id，实现指哪打哪
    popTitle: '配置页眉标题', // 打印配置页上方的标题
    extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
    preview: false, // 是否启动预览模式，默认是false
    previewTitle: '预览的标题', // 打印预览的标题
    previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
    zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
    previewBeforeOpenCallback() { console.log('正在加载预览窗口！'); }, // 预览窗口打开之前的callback
    previewOpenCallback() { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback
    beforeOpenCallback() { console.log('开始打印之前！') }, // 开始打印之前的callback
    openCallback() { console.log('执行打印了！') }, // 调用打印时的callback
    closeCallback() { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
    clickMounted() { console.log('点击v-print绑定的按钮了！') },
})


// api
const formTemplateApi = async (id) => {
    await formTemplate(id).then(res => {
        // console.log("报名表",res);
        state.datas = JSON.parse(res.data.formValue)
        console.log("报名表", state.datas);

    })
}
watch(() => props.id, (newValue: any) => {
    console.log("报名表",newValue);
    if (newValue) {
        formTemplateApi(newValue)
    } else {
        state.datas = null
    }
}, { immediate:true, deep: true })
</script>
<style lang="less">
@media print {
    @page {
        size: auto;
    }

    body,
    html {
        height: auto !important;
    }
}
</style> 
<style lang="less" scoped>
.table_content {
    width: 100%;
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    position: relative;

    .table_content_button {
        position: absolute;
        right: 36px;
        top: 36px;
    }
}

table,
table tr th,
table tr td {
    border: 1px solid #0094ff;
}

table {
    width: auto;
    min-height: 25px;
    line-height: 25px;
    text-align: center;
    border-collapse: collapse;
}

.table_content_mains {
    width: 100%;
    border: 1px solid #979797;

    tr {
        .el-row {
            width: 100%;
        }
    }

    .th_b_p {
        text-align: right;
        margin-top: 30px;
        margin-bottom: 20px;

        span {
            margin-left: 120px;

            &:nth-child(1) {
                margin-right: 220px;
            }
        }
    }

    .thImge {
        width: 124px;
    }

    .th1 {
        max-width: 130px;
        padding: 15px;
        // width: 11.5%;
        min-height: 50px;
    }


    .td1 {
        // width: 16.9%;
        height: 50px;
    }

    th {
        height: 50px;
        background: #F4F4F4;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        font-size: 18px;
        border: 1px solid #979797;

    }

    td {
        background: #FFFFFF;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        text-align: center;
        font-size: 18px;
        border: 1px solid #979797;
    }

    .td2 {
        padding: 17px;
        text-align: left;
    }
}

.table_content_main {
    padding: 36px 36px 57px 36px;

    .table_content_main_title {
        width: 100%;
        text-align: center;
        margin-bottom: 36px;
    }
}
</style>